<template>
    <IMenu mode="vertical" width="auto" :active-name="activeName" name="group" ref="group" @on-select="changeMenu">
        <IMenuItem v-for="group in groups" :key="group.id" :name="group.id">{{group.name}}({{group.total}})</IMenuItem>
        <IMenuItem v-if="$store.getters.per.wechat_manager_material_create" name="add" v-show="groups.length > 0" ><Icon type="plus"></Icon>新建分组</IMenuItem>
        <Update :callback="updateCallBack" ref="update" :transfer="transfer"></Update>
    </IMenu>
</template>
<script>
	import Menu from 'iview/src/components/menu'
    import Icon from 'iview/src/components/icon'

    import Update from './group-update'

	import Axios from 'admin/config/axios'

	export default{
		components:{
			'IMenu':Menu,
            'IMenuItem':Menu.Item,
            Update,
            Icon
        },
        props :{
            callback:{
                type: Function,
                required : true,
            },
            transfer:{
                type: Boolean,
                default : false,
            }
        },
        data(){
        	return {
        		activeName: "",
        		groups : [],
        	}
        },
        methods :{
        	//获取所有分组数据
        	getGroups(){
        		Axios.Wechat.Manager.Material.ImageGroup.All()
                .then(res =>{
                    if(!res) return false;
                    var data= res.data;
                    this.groups= data;
                    this.activeName = data[0]['id'];
                    this.$nextTick(function() {
	                	this.$refs.group.updateActiveName();
	                })
                })
                
        	},
        	//重置分组状态
        	reset(){
        		this.groups = [];
        		this.activeName="";
        		//必须更新menu的选中状态,不然无法打开后默认第一个选中,bug调试2小时
        		this.$nextTick(function() {
                	this.$refs.group.updateActiveName();
                })
        	},
            //点击分组名,调用回刷新分组数据
            changeMenu(id){
                if(id!='add'){
                    this.callback(id);
                    return false;
                }
                this.$refs.update.modal = true;
            },
            //新增分组回调调用
            updateCallBack(){
                this.getGroups();
            }
        },
	}
</script>